<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js"></script>
</head>
<body>
    <header>
        <div class="logo">
            <i class="fas fa-rocket"></i>
            <h1>创科科技</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="#"><i class="fas fa-info-circle"></i> 关于我们</a></li>
                <li><a href="#"><i class="fas fa-box-open"></i> 产品服务</a></li>
                <li><a href="#"><i class="fas fa-blog"></i> 博客动态</a></li>
                <li><a href="#"><i class="fas fa-phone"></i> 联系我们</a></li>
            </ul>
        </nav>
        <a href="#" class="cta-button">免费试用</a>
    </header>
    
    <main>
        <div class="branch">
            <h2><i class="fas fa-bars"></i> 产品分类</h2>
            <ul>
                <li class="active"><a href="#"><i class="fas fa-laptop"></i> 电脑产品</a></li>
                <li><a href="#"><i class="fas fa-mobile-alt"></i> 移动设备</a></li>
                <li><a href="#"><i class="fas fa-headphones"></i> 音频设备</a></li>
                <li><a href="#"><i class="fas fa-camera"></i> 摄影器材</a></li>
                <li><a href="#"><i class="fas fa-gamepad"></i> 游戏设备</a></li>
                <li><a href="#"><i class="fas fa-tablet-alt"></i> 平板电脑</a></li>
                <li><a href="#"><i class="fas fa-watch"></i> 智能手表</a></li>
                <li><a href="#"><i class="fas fa-home"></i> 智能家居</a></li>
            </ul>
        </div>
        
        <div class="content">
            <div class="hero">
                <h2>创新科技，改变生活</h2>
                <p>我们致力于为全球用户提供最前沿的科技产品和解决方案，让科技服务于人类，创造更美好的未来。</p>
                <a href="#" class="cta-button">了解更多 <i class="fas fa-arrow-right"></i></a>
            </div>
            
            <h2 class="section-title">我们的特色服务</h2>
            <div class="features">
                <div class="feature-card">
                    <i class="fas fa-shipping-fast"></i>
                    <h3>极速配送</h3>
                    <p>全国范围内24小时内送达，部分地区支持当日达服务。</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-headset"></i>
                    <h3>专业支持</h3>
                    <p>7x24小时专业客服支持，解决您使用过程中的任何问题。</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-shield-alt"></i>
                    <h3>质量保证</h3>
                    <p>所有产品均通过严格质量检测，提供三年质保服务。</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-sync-alt"></i>
                    <h3>无忧退换</h3>
                    <p>30天内无理由退换货，购物全程无忧。</p>
                </div>
            </div>
            
            <h2 class="section-title">热销产品</h2>
            <div class="products">
                <div class="product-card">
                    <div class="product-img">旗舰笔记本电脑</div>
                    <div class="product-info">
                        <h3>超极本 Pro X</h3>
                        <p>超轻薄设计，强大性能，满足专业工作和娱乐需求。</p>
                        <span class="price">¥8,999</span>
                        <a href="#" class="cta-button">立即购买</a>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">智能手机</div>
                    <div class="product-info">
                        <h3>智能旗舰手机 S22</h3>
                        <p>顶级处理器，超清四摄，全天候续航能力。</p>
                        <span class="price">¥5,299</span>
                        <a href="#" class="cta-button">立即购买</a>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">无线耳机</div>
                    <div class="product-info">
                        <h3>降噪耳机 Air Pro</h3>
                        <p>主动降噪技术，高保真音质，持久续航。</p>
                        <span class="price">¥1,299</span>
                        <a href="#" class="cta-button">立即购买</a>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>创科科技成立于2010年，是全球领先的科技产品提供商，致力于通过创新科技改善人们的生活方式。</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul class="footer-links">
                    <li><a href="#"><i class="fas fa-angle-right"></i> 公司简介</a></li>
                    <li><a href="#"><i class="fas fa-angle-right"></i> 产品中心</a></li>
                    <li><a href="#"><i class="fas fa-angle-right"></i> 解决方案</a></li>
                    <li><a href="#"><i class="fas fa-angle-right"></i> 客户案例</a></li>
                    <li><a href="#"><i class="fas fa-angle-right"></i> 新闻动态</a></li>
                </ul>
            </div>
            
            <div class="footer-section">
                <h3>联系我们</h3>
                <ul class="contact-info">
                    <li><i class="fas fa-map-marker-alt"></i> 北京市海淀区科技园区88号</li>
                    <li><i class="fas fa-phone"></i> 400-888-8888</li>
                    <li><i class="fas fa-envelope"></i> contact@techcompany.com</li>
                    <li><i class="fas fa-clock"></i> 周一至周五: 9:00 - 18:00</li>
                </ul>
            </div>
        </div>
        
        <div class="copyright">
            <p>&copy; 2023 创科科技有限公司 版权所有 | 京ICP备12345678号</p>
        </div>
    </footer>
</body>
</html>